<template>
  <div>
    <button @click="openDrawer('add')">添加</button>
    <button @click="openDrawer('view')">预览</button>
    <button @click="openDrawer('edit')">修改</button>
    <button>删除</button>

    <el-drawer
      :title="drawerTitle"
      :visible.sync="isShowDrawer"
      :before-close="handleClose"
    >
      <span>我来啦!</span>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'XxxYxx',
  data () {
    return {
      isShowDrawer: false,
      drawerType: '' // add | edit | view
    }
  },
  computed: {
    drawerTitle () {
      let title = '默认标题'
      if (this.drawerType === 'add') title = '添加面经'
      if (this.drawerType === 'edit') title = '修改面经'
      if (this.drawerType === 'view') title = '面经预览'
      return title
    }
  },
  methods: {
    handleClose () {
      this.isShowDrawer = false
      console.log('关闭之前的方法')
    },
    // 打开抽屉的方法
    openDrawer (type) {
      console.log(type)
      this.drawerType = type
      this.isShowDrawer = true
    }
  }
}
</script>

<style>
</style>
